<script setup lang="ts">
import { Autoplay } from "swiper/modules";
import { SwiperSlide, Swiper } from "swiper/vue";

defineProps<{
  list: any[];
}>();

defineEmits<{
  select: [any];
}>();
</script>

<template>
  <div class="my-96px">
    <h3 class="mb-60px text-44px text-center font-500">视频中心</h3>

    <ClientOnly>
      <Swiper
        loop
        centeredSlides
        :speed="1000"
        :slidesPerView="2"
        :spaceBetween="15"
        :loopPreventsSlide="true"
        :modules="[Autoplay]"
        :autoplay="{ delay: 3000, disableOnInteraction: false }"
      >
        <swiper-slide v-for="(item, index) in list" :key="index">
          <p class="text-30px text-center mb-6 truncate">
            {{ item.title }}
          </p>

          <div class="relative aspect-[21/10]">
            <img :src="item.cover" class="w-full h-full object-cover" />

            <div
              class="absolute top-0 left-0 w-full h-full opacity-30 hover:opacity-100 duration-200 cursor-pointer"
              @click="$emit('select', item)"
            >
              <div
                class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-black/50 w-18 h-11 rounded flex-center"
              >
                <Icon name="Play" class="text-white text-2xl!" />
              </div>
            </div>
          </div>
        </swiper-slide>
      </Swiper>
    </ClientOnly>
  </div>
</template>
